import React, { useState } from 'react'
import "./index.css"
export default function Item({ todo, done }) {
  //isActive状态用来保存li的active类是否添加和按钮的display状态
  const [isActive, setIsActive] = useState(false);

  //鼠标移入li事件函数
  const mouseEnterHandle = (e) => {
    setIsActive(true);
  }

  //鼠标移出li的事件函数
  const mouseLeaveHandle = (e) => {
    setIsActive(false);
  }
  return (
    <li
      onMouseEnter={mouseEnterHandle}
      onMouseLeave={mouseLeaveHandle}
      className={isActive ? "active" : ""}
    >
      <label>
        <input type="checkbox" defaultChecked={done} />
        <span>{todo}</span>
      </label>
      <button className="btn btn-danger" style={{ display: isActive ? "block" : "none" }}>删除</button>
    </li>
  )
}
